<template>
  <div id="login">
    <el-dialog v-model="VerifyIsOn" title="验证一下你是不是人类?">
      <Verify @LoginSuccess="VerifySuccess" />
      <span style="color: red">请精确到99%覆盖</span>
    </el-dialog>
    <div class="bgblack" :class="{ bgblackOn: bodyShow }"></div>
    <div class="login">
      <div class="header">
        <div class="headlogo">
          <img src="../assets/img/headlogo.png" alt="" />
        </div>
        <div class="today">
          {{ DateG.year }}年{{ DateG.mon }}月{{ DateG.day }}日 星期{{
              DateG.Day
          }}
        </div>
        <div class="weather">
          <Pouring />
        </div>
      </div>

      <div class="body">
        <div class="bodyLogin" v-loading="loading" :class="{ openData: bodyShow }">
          <div class="loginbody">
            <!-- 真实内容 -->
            <div class="hb">
              <div class="hb1">
                <span>欢迎您,我的主人</span>
                <img src="../assets/img/Godz.png" alt="" />
              </div>
              <!-- 表单 -->
              <div class="hb2">
                <el-form :model="formInline" class="demo-form-inline">
                  <el-form-item label="账号">
                    <el-input v-model="formInline.username" placeholder="请输入账号" />
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="formInline.password" type="password" placeholder="请输入密码" />
                  </el-form-item>
                  <el-form-item class="btnClass">
                    <div class="btn" @click="onSubmit">立即登录</div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <!-- 装饰线 -->
          <div class="zhuangshi">
            <div class="waiceng"></div>
            <div class="neiceng"></div>
          </div>
        </div>
      </div>
      <div class="btnL" v-show="VeriShow" @click="VerifyIsOn = !VerifyIsOn">
        <el-icon>
          <Dessert />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import Verify from "./login/verify.vue";
//后端请求了
import { loginPass } from "../api/login";

sessionStorage.setItem("pass", "false");//任何人只要进来先拒绝进入

const loading = ref(false);

const VerifyIsOn = ref(false);

const router = useRouter();
let bodyShow = ref(false);
let VeriShow = ref(true); //最下面弹出验证按钮显示
//机器验证成功,就开始启动登录页
const VerifySuccess = () => {
  VeriShow.value = false;
  VerifyIsOn.value = false;
  bodyShow.value = true;
};
//登录验证表
const formInline = ref({
  username: "",
  password: "",
});
//今天星期几
let DateG = reactive({
  year: "",
  mon: "",
  day: "",
  Day: "",
});
const onSubmit = () => {
  loading.value = true;
  loginPass(formInline.value).then((res) => {
    if (res) {
      sessionStorage.setItem("pass", "true"); //设置会话可以进入
      //成功后
      ElMessage({
        showClose: true,
        message: "登录成功,欢迎您,我的主人Godz",
        type: "success",
      });
      router.push("/main");
    } else {
      ElMessage({
        type: "error",
        message: "密码输入错误,或者账号不存在",
      });
    }
    loading.value = false;
  });
};
onMounted(() => {
  console.log("创建完成后");
  const date = new Date();
  DateG.year = date.getFullYear() + "";
  DateG.mon = date.getMonth() + 1 + "";
  DateG.day = date.getDate() + "";
  DateG.Day = date.getDay() + "";
  console.log(DateG);
});
</script>

<style lang="less" scoped>
#login {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .bgblack {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(black, 0.5);
    transition: all 0.3s ease 0s;
    opacity: 0;

    &.bgblackOn {
      opacity: 1;
    }
  }

  .login {
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/4k.jpg");
    background-size: 100%;
    background-position: 0 50%;
    background-repeat: no-repeat;

    .header {
      width: 100%;
      height: 10%;
      position: relative;

      div {
        float: left;
      }

      .headlogo {
        width: 15%;
        height: 80%;

        img {
          height: 80%;
          margin-left: 30%;
          margin-top: 10%;
        }
      }

      .today {
        position: absolute;
        right: 10%;
        top: 30%;
        font-size: 24px;
        color: white;
      }

      .weather {
        width: 50px;
        position: absolute;
        right: 5%;
        top: 15%;
        font-size: 24px;
        color: white;
      }
    }
  }

  .body {
    width: 100%;

    .bodyLogin {
      width: 25%;
      height: 500px;
      background-color: rgba(white, 0.2);
      opacity: 0;
      margin: 50% 100%;
      transition: all 0.5s ease 0s;

      &.openData {
        margin: 0 35%;
        opacity: 1;
      }

      .zhuangshi {
        position: relative;
        width: 100%;
        height: 100%;

        .waiceng {
          position: absolute;
          z-index: 0;
          width: 104%;
          height: 103%;
          border: 3.5px solid red;
          margin-left: -6%;
          border-image: -webkit-linear-gradient(-45deg,
              rgba(dodgerblue; 0),
              rgba(#00eeff, 1),
              rgba(dodgerblue; 0)) 5;
        }

        .neiceng {
          position: absolute;
          z-index: 0;
          width: 104%;
          height: 103%;
          border: 2px solid red;
          margin-top: -6%;
          border-image: -webkit-linear-gradient(-45deg,
              rgba(dodgerblue; 0),
              rgba(#00eeff, 1),
              rgba(dodgerblue; 0)) 5;
        }
      }

      .loginbody {
        width: 80%;
        margin: 0 auto;
        position: relative;

        .hb {
          position: absolute;
          z-index: 2;
          margin-top: 50px;
          width: 100%;
          height: 400px;

          .hb1 {
            width: 100%;
            height: 30%;
            text-align: center;

            span {
              color: aqua;
              font-size: larger;
              font-weight: bold;
            }

            img {
              width: 35%;
              border-radius: 50%;
              box-shadow: 0px 0px 50px aqua;
            }
          }

          .hb2 {
            margin-top: 8%;
            width: 100%;
            height: 65%;

            .demo-form-inline {
              width: 90%;
              margin: 0 auto;

              .btnClass {
                width: 100%;

                .btn {
                  width: 100%;
                  border-radius: 5px;
                  height: 35px;
                  text-align: center;
                  border: 1px solid aqua;
                  color: aliceblue;
                  cursor: pointer;

                  &:hover {
                    background-color: aqua;
                    color: black;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  //这是最下面的显示按钮不是登录的
  .btnL {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 5%;
    bottom: 5%;
    background-color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: dodgerblue;
    box-shadow: 0px 0px 10px dodgerblue;
    cursor: pointer;

    &:hover {
      background-color: darkgrey;
    }
  }

  :deep(.el-form-item__label) {
    color: white;
  }

  :deep(.el-input__wrapper) {
    --el-input-focus-border-color: aqua;

    .el-input__inner {
      color: white;

      &::-webkit-input-placeholder {
        /* WebKit browsers*/
        color: rgba(white, 0.5);
      }
    }
  }

  :deep(.el-input__wrapper) {
    background-color: transparent;
  }

  :deep(.el-button) {
    margin: 0 auto;
    width: 30%;
    background-color: transparent;
    color: white;

    &:first-child {
      --el-button-border-color: aqua;
      --el-button-active-border-color: aqua;
      --el-button-hover-text-color: aqua;
      --el-button-divide-border-color: aqua;
    }
  }

  :deep(.el-dialog) {
    width: 35%;
    --el-dialog-bg-color: rgba(white, 0.1);
    border-image-source: radial-gradient(65% 65%,
        transparent 0px,
        transparent 100%,
        aqua 100%);
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;

    .el-dialog__title {
      color: white;
    }

    .el-dialog__close {
      color: white;

      &:hover {
        color: red;
      }
    }

    .el-dialog__body {
      span {
        color: white;
      }
    }

    .pImg {
      width: 100%;
    }
  }
}

@media (max-width: 1250px) {
  #login {
    .login {
      background-position: 0 0;
      background-size: 100% 100%;
    }

    .body {
      .bodyLogin {
        .loginbody {
          .hb {
            .hb2 {
              .demo-form-inline {
                width: 100%;

                .btnClass {
                  width: 90%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
